<template>
  <el-card class="tab" v-loading="loading">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录账户设置" name="first">
        <el-form
          :model="userInfo"
          label-position="right"
          label-width="200px"
          style="margin-top: 40px"
          :rules="rules"
          ref="form"
        >
          <el-form-item label="姓名" prop="username">
            <el-input v-model="userInfo.username" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input
              v-model="userInfo.password"
              style="width: 50%"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateUserInfo">更新</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="个人详情" name="second">
        <userInfo></userInfo>
      </el-tab-pane>
      <el-tab-pane label="岗位信息" name="third">
        <jobInfo></jobInfo>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import jobInfo from "../jobInfo"
import userInfo from "../userInfo";
import { getUserDetailById } from "@/api/user";
import { saveUserDetailById } from "@/api/employees";
export default {
  components: {
    userInfo,
    jobInfo
  },
  data() {
    return {
      loading: false,
      activeName: "first",
      userId: "",
      userInfo: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, message: "密码长度小于6位", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.userId = this.$route.params.id;
    this.getDetail();
  },
  methods: {
    handleClick(tab) {
      if (tab.label == "登录账户设置") {
        console.log("log");
      } else if (tab.label == "个人详情") {
        console.log("detail");
      } else {
        console.log("job");
      }
    },
    async getDetail() {
      let result = await getUserDetailById(this.userId);
      console.log(result);
      this.userInfo = result;
      console.log(this.userInfo);
    },
    updateUserInfo() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            let result = await saveUserDetailById(this.userInfo);
            console.log(result);
            this.$message({
              type: "success",
              message: "更新用户信息成功",
            });
            this.loading = false;
            this.getDetail();
          } catch (error) {
            this.$message({
              type: "info",
              message: "更新用户信息失败",
            });
            this.loading = false;
          }
        } else {
          console.log("wrong submit");
        }
      });
    },
  },
};
</script>

<style lang="scss">
.tab {
  margin: 20px;
}
</style>